<template>
  <div class="section">
    <!-- 主体内容的头部区域 -->
    <sethead :arrTitle="arr" :time="value">
      <template #search-btn>
        <div>
          <el-button type="primary" size="mini" class="btn" @click="search">搜索</el-button>
        </div>
      </template>
    </sethead>
    <!-- 创建 -->
    <div class="btnBox">
      <el-button type="primary" size="mini" class="search-btn" @click="toCreateRole">创建</el-button>
    </div>
    <!-- 表格内容 -->
    <tablecontent :tableData="listData" operator2="停用" operator1="编辑"></tablecontent>
    <!-- 页码 -->
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
      :current-page="currentPage" :page-sizes="[3, 4, 5]" :page-size="3" class="pages"
      layout="total, sizes, prev, pager, next, jumper" :total="total">
    </el-pagination>
  </div>
</template>

<script>
import sethead from "../setTingHead"; //导入设置模块的搜索头部
import tablecontent from "../table"; //导入表格内容
import { reqAccountInfo } from "@/request/createAccount";
export default {
  components: {
    sethead,
    tablecontent,
  },
  data() {
    return {
      pageSize: 3, //每个页面显示3条数据
      curPage: 1, //当前页面
      total: 10, //默认初始化总共的数据
      currentPage: 1, //当前页面
      createUser: "创建账号", //控制表格dialog弹开
      listData: [],
      searchData: [],
      // 检索条件
      arr: [
        { title: "角色编码", val: "" },
        { title: "角色名称", val: "" },
        { title: "更新时间", hasDate: true, val: "" },
        { title: "更新人", val: "" },
      ],
      // 数据标题
      userInfo: [
        { title: "用户姓名" },
        { title: "用户账号" },
        { title: "身份证号码" },
        { title: "手机号码" },
        { title: "选择角色" },
      ],
      value: "",
    };
  },
  mounted() {
   //页面加载的时候请求那个store里面的数据
    this.listData = this.$store.state.roleAccountTableData; 
    // 总数据条数
    this.total = this.$store.state.roleAccountTableData.length; 
  },
  methods: {
    handleClick(row) {
      console.log(row);
    },
    search() {
      this.searchData = []; //搜索的时候先清空
      reqAccountInfo().then((res) => {
        res.map((element) => {
          // // 判断是否含有角色编号
         // let flag1 = element.roleNum.includes(this.arr[0].val) && this.arr[0].val!=="";
          // 判断是否含有角色姓名
         // let flag2 = element.roleName.includes(this.arr[1].val) && this.arr[1].val!=="";
          // 判断是否含有更新时间
         // let flag3 = element.updateDate.includes(this.arr[2].val) && this.arr[2].val!=="";
          // 判断是否含有更新作者
         // let flag4 = element.updateAuthor.includes(this.arr[3].val) && this.arr[3].val!=="";
         console.log(this.arr,"1");
          let property = "";
          for (let i = 0; i < this.arr.length; i++) {
            switch (i) {
              case 0:
                property = "roleNum";
                break;
              case 1:
                property = "roleName";
                break;
              case 2:
                property = "updateDate";
                break;
              case 3:
                property = "updateAuthor";
                break;
            }
            //有属性才进来
            console.log(element[property]);
            if (this.arr[i].val !== '' && element[property].includes(this.arr[i].val)) {
              this.searchData.push(element);
            }
          }
          return this.listData = this.searchData  //返回数据
        });
      });
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pagesize = val; //更新每页显示条数据
    },

    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val; //更新当前页码数
    },

    toCreateRole() {
      // 点击创建角色跳转到创建角色页面
      this.$router.push({ path: "/home/createRole" });
    },
  },
};
</script>

<style lang="less" scoped>
.section {
  height: 100%;
  background-color: #fff;
  .btnBox {
    .search-btn {
      float: right;
      margin: 20px 62px 20px 0;
    }
  }
}
/deep/.el-button--mini,
.el-button--mini.is-round {
  padding: 8px 24px;
}
/deep/.pages {
  float: left;
  margin: 20px 0 0 30px;
}
.btn {
  position: absolute;
  right: 20px;
  top: 5px;
}
</style>